<template>
  <div>
    <Top title="我的足迹" iconShow="1"></Top>
    <div class="myfoot" v-if="listData.length!=0">
      <!-- 我的足迹列表 -->
      <div v-for="(item,index) in listData" :key="index" @click="goChildPage(item.platformId)">
        <div class="myfoot-time">
          <i class="iconfont icon-shijian"></i>
          {{item.accessTime}}
        </div>
        <div class="myfoot-list">
          <div class="myfoot-list-logo">
            <div class="myfoot-list-logo-img">
              <img :src="item.logo" />
            </div>
          </div>
          <div class="myfoot-list-content">
            <div class="title">{{item.abbreviation}}</div>
            <span class="badge" v-for="(itemC,idx) in item.label" :key="idx">
              {{itemC}}
            </span>
            <div class="money">
              <span class="money-rmb">¥</span>
              <span class="money-num">{{item.quato}}</span>
            </div>
          </div>
          <div class="myfoot-list-icon">
            <i class="iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 更多贷款 -->
    <div class="look-more" @click="lookMore" v-if="showMore&&listData.length!=0">更多足迹&nbsp;
      <i class="iconfont icon-zhankaifuzhi"></i>
    </div>
    <!-- 没有更多了 -->
    <div class="no-more" v-if="!showMore&&listData.length!=0">
      <span>没有更多了</span>
    </div>
    <!-- 我的足迹列表end -->
  
    <!-- 我的足迹列表为空时-->
    <div class="no-foot" v-if="listData.length==0">
      <img src="../assets/no-foot.png" />
      <p class="no-foot-word">您没有留下任何足迹哦~</p>
      <mt-button type="primary" @click="goRecommend">去看看</mt-button>
    </div>
    <!-- 我的足迹列表为空时 end-->
  </div>
</template>
<script>
import Top from '../components/Header'
import { Indicator } from 'mint-ui'
export default {
  name: 'login',
  data() {
    return {
      listData: [],//列表数据
      platformId: '',//定位产品的依据,
      showMore: true,
      pageNum:1
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 进入产品详情页面
    goChildPage(platformId) {
      this.$router.push({ path: '/loanplatformdetail', query: { platformId: platformId } })
    },
    // 进入推荐页面
    goRecommend() {
      this.$router.push({ path: '/main/recommentproduct' })
    },
    lookMore() {
      // 点击加载更多,显示loading
      this.pageNum += 1;
      this.getList();
    },
    getList() {
      Indicator.open('加载中...')
      // 从session中获取borrowerId;
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      // 接口参数
      let postData = { borrowerId: borrowerId, pageNum: this.pageNum, pageSize: 6 };
      // 调用获取我的足迹接口
      this.$http.post('/loansupermarket-app/personal/getCustomerPlatformVisitInfo.do', postData)
        .then((response) => {
          setTimeout(function () {
            Indicator.close();
          }, 500)
          var resBody = response.body;
          // console.log(resBody)
          if (resBody.code == '000') {
          // 数组拼接
            if (resBody.result.length != 0) {
              this.listData = this.listData.concat(resBody.result);
              // console.log(this.listData)
            }
            //判断是否还有更多
            if (resBody.result < 6) {
              this.showMore = false;
            }
            // 如果label为string，那么就拆分成数组
            this.listData.forEach(function (element) {
              if (typeof (element.label) == "string") {
                element.label = element.label.split(',');
              }
            });
            
          } else if (resBody.code == '444') {
            // 如果返回444，那么说明没有登录，就进入登录页
            this.$router.push({ path: '/login' })
          } else {
            alert(resBody.msg);
          }
        })
    }
  },
  components: { Top }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.myfoot {
  margin-top: 1.4rem;
  box-sizing: border-box;
  padding: 0 0.4rem;
  margin-bottom: 0.4rem;
  &-time {
    padding: 0.1rem 0 0 0;
    font-size: 0.4rem;
    text-align: left;
    height: 0.8rem;
    line-height: 0.8rem;
    .iconfont {
      vertical-align: -8%;
      font-size: 0.5rem;
      color: $iconColor;
    }
  }
  &-list {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    margin-top: 0.1rem;
    text-align: left;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    &-logo {
      flex: 2.5;
      &-img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0.8rem auto;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-content {
      flex: 8;
      box-sizing: border-box;
      .title {
        line-height: 1.1rem;
        font-size: 0.42rem;
        font-family: PingFangSC-Regular, sans-serif;
      }
      .badge {
        display: inline-block; // width: 1.5rem;
        padding: 0 0.2rem;
        min-width: 1.1rem;
        line-height: 0.475rem;
        height: 0.44rem;
        text-align: center;
        border: 1px solid $primaryColor;
        color: $primaryColor;
        border-radius: 0.24rem;
        margin-right: 0.1rem;
      }
      .money {
        // margin-top: 0.3rem;
        height: 0.9rem;
        line-height: 1.1rem;
        &-rmb {
          font-size: 0.6rem;
          color: $redColor;
          font-family: PingFangSC-Regular, sans-serif;
        }
        &-num {
          font-size: 0.75rem;
          color: $redColor;
          margin-left: 0.1rem;
          font-family: PingFangSC-Regular, sans-serif;
        }
      }
    }
    &-icon {
      flex: 1.5;
      line-height: 2.5rem;
      height: 2.5rem;
      text-align: center;
      .iconfont {
        font-size: 0.45rem;
        vertical-align: -11%;
      }
    }
  }
}

.no-foot {
  width: 100%;
  margin-top: 1.6rem;
  img {
    margin-top: 2rem;
    width: 6.5rem;
    height: 4.5rem;
  }
  &-word {
    font-size: 0.45rem;
  }
  .mint-button {
    width: 50%;
    margin-top: 0.4rem;
  }

 
}
 .look-more {
    margin-top: 0.4rem;
    font-size: 0.4rem;
    color: $iconColor;
    margin-bottom: 0.3rem;
    .iconfont {
      color: $iconColor;
      vertical-align: 3%;
    }
  }
  .no-more {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    font-size: 0.34rem;
    span {
      color: $iconColor;
    }
    p {
      span {
        color: $iconColor;
      }
      a {
        color: $primaryColor;
        text-decoration: underline;
      }
    }
  }
</style>

